<script setup lang="ts">
import type { CSSProperties } from 'vue'

defineProps<{
  text?: string,
  textStyle?: CSSProperties,
  position: {
    left?: string,
    right?: string,
    top?: string,
    bottom?: string
  }
}>()
</script>

<template>
  <view class="fixed-button" :style="position">
    <slot>
      <view :style="textStyle">{{ text }}</view>
    </slot>
  </view>
</template>

<style scoped lang="scss">
.fixed-button {
  position: fixed;
  background-color: $uni-white;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: $uni-shadow-base;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
